<template>
	<view>
		<view class="store" @touchmove.stop  @click="hideStoreDetails">
			<view class="storeContent" @click.stop>
				<view class="storeTop">
					<image class="logo" :src="storeDetail.logo"></image>
					<view class="right">
						<view class="name">{{storeDetail.storeName}}</view>
						<text class="des">{{storeDetail.storeDescription}}</text>
						<view class="coupons">
							<view v-for="items in storeDetail.coupons" @click="claimCoupons(storeDetail,items)">
								满{{items.couponValue}}减{{items.couponName}}
								<text>领取</text>
							</view>
						</view>
					</view>
				</view>
				<view class="search">
					<input v-model="keyword" placeholder="搜索商品名称" type="search" class="search_input">
					<view @click="queryFoodsByKeywordFn">
						<uni-icons type="search" color="green" size="25"></uni-icons>
					</view>
				</view>
				<view class="storeBottom">
					<view class="left">
						<!-- <view class="title">点菜</view> -->
						<scroll-view class="menuClassList" scroll-y>
							<view @click="setMemuClass(item)"
								:class="['menuClass',foodTypeName == item ? 'active' : '']"
								v-for="(item,index) in storeDetail.foodTypes">
								{{item}}
							</view>
						</scroll-view>
					</view>
					<scroll-view class="right" scroll-y>
						<template>
							<view class="dish_title">
								{{foodTypeName}}
							</view>
							<view class="dish" v-for="(items,indexs) in  storeDetail.groupedFoods[foodTypeName]">
								<view class="dish_img" @click="showDish(items)">
									<image src="/static/logo.png"></image>
								</view>
								<view class="dish_right">
									<view class="dish_name">{{items.foodName}}</view>
									<view class="dish_num">
										<view class="money">￥{{ items.salePrice  }}</view>

										<view class="specConetnt" v-if="items.specification.length">
											<view class="selSpec" @click="showSpecAlert(item,items)">
												<view class="">选规格</view>
											</view>
											<view class="num" v-if="items.count > 0">{{ items.count }}</view>
										</view>
										<view class="showInput" v-else>
											<view class="down" @click="changeShopNum('down',items)">-</view>
											<input :clearable="false" v-model="items.count" :disabled="true" />
											<view class="add" @click="changeShopNum('add',items)">+</view>
										</view>
									</view>
								</view>
							</view>
						</template>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 规格 -->
		<specBox ref="specBox" :addressId="siteAddrId" @getShopCar="getShopCar" :specInfo="specInfo"></specBox>
		
		
	</view>
</template>

<script>
	import {
		queryStoreDetail,
		queryFoodByType,
		queryFoodByKeyword,
		addShoppingCart,
		removeShoppingCart,
	} from "@/request/api.js";
	export default {
		name: "storeDetails",
		props: {
			siteAddrId: {
				type: String,
				default: ''
			},
			storeId: {
				type: String,
				default: ''
			},
			shopCarList: {
				type: Array,
				default: []
			}
		},
		watch: {
			shopCarList: {
				handler(nval) {
					this.setCount(nval);
				},
				deep: true,
				immediate: true,

			}
		},
		data() {
			return {
				storeDetail: {}, //店铺详情
				active: 1,
				keyword: '', //输入框搜索菜名
				foodTypeName: '选品', //分类名称
				pageNo: 1, //分页参数
				pageSize: 10, //页码
				menuClass: [], //菜品分类
				groupedFood: [], //菜品列表
				specInfo: {}, //菜品规格
				dish:{}
			};
		},
		methods: {
			
			
			setCount(nval) {
				// 获取购物车的菜品数量，并显示到页面
				nval?.forEach(item => {
					for (var key in this.storeDetail.groupedFoods) {
						this.storeDetail.groupedFoods[key].forEach(items1 => {
							if (items1.foodId == item.foodId) {
								items1.count = item.count;
							}
						})
					}
				})
			},
			// 点击左侧菜单分类
			setMemuClass(name) {
				// this.active = index;
				this.foodTypeName = name
				this.queryFoodByTypeFn();
			},
			// 获取店铺详情 左侧菜单分类
			let userInfo = uni.getStorageSync('userInfo');
			async queryStoreDetailFn() {
				let res = await queryStoreDetail({
					method: "GET",
					data: {
						// siteId: this.siteAddrId,
						companyId:userInfo.companyId, 
						menuId:userInfo.menuId,
						 storeId: this.storeId
					},
				})
				for (var key in res.result.groupedFoods) {
					res.result.groupedFoods[key].map(items => {
						items.count = 0;
					})
				}


				this.storeDetail = res.result
				this.setCount(this.shopCarList);
			},
			// 根据菜单分类获取菜单列表
			async queryFoodByTypeFn() {
				let res = await queryFoodByType({
					method: "GET",
					data: {
						siteId: this.siteAddrId,
						storeId: this.storeId,
						foodTypeName: this.foodTypeName,
						pageNo: this.pageNo,
						pageSize: this.pageSize
					},
				})
				this.groupedFood = res.result.groupedFood;

			},

			// 店铺内根据搜索条件返回符合条件的菜品  
			async queryFoodByKeywordFn() {
				let res = await queryFoodByKeyword({
					method: "GET",
					data: {
						siteAddrId: this.siteAddrId,
						storeId: this.storeId,
						keyword: this.keyword,
						pageNo: this.pageNo,
						pageSize: this.pageSize
					},
				})
				console.log(res, 'res');
			},
			// 领取优惠券
			async claimCoupons(item, items) {
				let res = await receiveCoupon({
					method: "POST",
					data: {
						"siteId": this.myAddress.addressId,
						"storeId": item.storeId,
						"couponId": items.couponId,
					},
				})
				uni.showToast({
					title: res.code == 200 ? '领取成功!' : res.message,
					icon: res.code == 200 ? 'success' : 'none'
				})
			},
			async changeShopNum(type, item) {

				if (type == 'add') {
					// 添加到购物车
					if (item.limitCount < 1) {
						this.$showToast(this, '库存不足，无法继续添加', 'fail');
						return;
					}
					let params = {
						"siteAddressId": this.siteAddrId,
						"storeId": this.storeId,
						"storeName": this.storeDetail.storeName,
						"foodId": item.foodId,
						"foodName": item.foodName,
						"count": 1,
						"salePrice": item.salePrice,
						"specification": []
					}
					this.$store.commit('addShopCar', params);
					let res = await addShoppingCart({
						method: "POST",
						data: params,
					})
					if (res.code == 200) {
						item.count += 1
					} else {
						uni.showToast({
							title: res.message,
							type: 'none',
						})
					}


				} else if (type == 'down' && item.count >= 1) {
					// 从购物车中删除
					let params = {
						"siteId": this.siteAddrId,
						"foodId": item.foodId,
						"count": 1,
					}
					let res = await removeShoppingCart({
						method: "post",
						data: params,
					})
					res.code == 200 && (item.count -= 1);

				}
				this.$emit('getShopCar');
			},

			//展示商品规格选择弹窗
			showSpecAlert(item, foodItem) {
				let token = uni.getStorageSync('token');
				if (!token) {
					this.auth = true;
					return;
				}
				foodItem.specifications = foodItem.specification
				this.specInfo = foodItem
				// this.storeDetail = {storeId:this.storeId,storeName:this.storeName}
				// console.log(foodItem,'item');
				this.$nextTick(() => {
					this.$refs.specBox.showSpec()
				})
			},
			getShopCar() {
				this.$emit('getShopCar');
			},
			// 隐藏商店详情
			hideStoreDetails() {
				this.$emit('hideStoreDetails', false)
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 店铺详情 弹窗
	.store {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		z-index: 2;
	}

	// 店铺详情 内容部分
	.storeContent {
		background-color: #eee;
		height: calc(100% - 160rpx);
		position: absolute;
		width: 100%;
		bottom: 0;
	}

	// 店铺详情 头部
	.storeTop {
		// align-items: flex-start
		padding: 20rpx;
		margin: -40rpx 20rpx 0;
		width: calc(100% - 80rpx);
		@include flexs(flex-start, stretch);
		z-index: 100;
		background: #fff;
		border-radius: 10rpx;
		box-shadow: 0 0 5rpx rgba(0, 0, 0, .2);

		//店铺logo
		.logo {
			width: 100rpx;
			height: 100rpx;
		}

		// 店铺名称 简介
		.right {
			// justify-content: space-around
			@include flexs(space-around, flex-start);
			flex-direction: column;

			margin-left: 15rpx;

			// 名称
			.name {
				font-weight: 600;

			}

			// 简介
			.des {
				color: #999;
				margin: 10rpx 0;
			}

			// 优惠券
			.coupons {
				font-size: 24rpx;
				color: #fff;
				@include flexs(space-between, center);

				&>view {
					background: #FC651C;
					margin-right: 10rpx;
					padding: 5rpx 10rpx;
					border-radius: 5rpx;
					white-space: nowrap;

					text {

						padding-left: 10rpx;
						margin-left: 10rpx;
						border-left: 1rpx solid #fff;
					}
				}
			}
		}
	}

	// 店铺详情 搜索菜品
	.search {
		@include flexs(space-between, center);
		margin: 20rpx;
		padding: 10rpx 0;
		border-radius: 25rpx;
		background: #fff;
		height: 60rpx;
		line-height: 60rpx;

		input {
			padding: 0 20rpx;
		}

		view {
			@include flexs(center, center);
			width: 110rpx;
			text-align: center;
			border-left: 1rpx solid #ccc;
		}
	}

	// 店铺详情 菜品分类 、菜品
	.storeBottom {
		width: 100%;
		height: calc(100% - 225rpx);
		background: #fff;
		@include flexs(space-between, flex-start);

		//菜品分类
		.left {

			width: 200rpx;

			.title {
				padding: 20rpx 25rpx 0;
				font-size: 28rpx;
			}

			.menuClassList {
				height: calc(100vh - 440rpx);
			}

			.menuClass {
				padding: 40rpx 15rpx 0;
				font-size: 26rpx;
				color: #999;

				&.active {
					color: #000;
				}
			}
		}

		// 菜品
		.right {
			// margin-top: 60rpx;
			width: calc(100% - 220rpx);
			height: calc(100vh - 445rpx);

			.dish_title {
				font-size: 30rpx;
				font-weight: 600;
				padding: 40rpx 15rpx 0;
			}

			.dish {
				@include flexs(space-between, stretch);
				padding: 30rpx 15rpx;

				&_img {
					width: 120rpx;
					height: 120rpx;
					margin-right: 15rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				&_name {
					font-size: 28rpx;
					font-weight: 600;
				}

				&_right {
					width: calc(100% - 135rpx);
					@include flexs(space-between, flex-start);
					flex-direction: column;
				}

				&_num {
					width: 100%;
					@include flexs(space-between, center);
				}

				.specConetnt {
					background: #35AA4C;
					border-radius: 4px;
					padding: 5rpx 10rpx;
					color: #fff;
					position: relative;
				}

				.num {
					width: 30rpx;
					height: 30rpx;
					font-size: 20rpx;
					border-radius: 50%;
					background-color: #f60000;
					position: absolute;
					right: -10rpx;
					top: -10rpx;
					line-height: 30rpx;
					text-align: center;
					color: #fff;
				}
			}

			.showInput {
				width: 50%;
				@include flexs(space-between, center);
				color: #000000;
				border-radius: 50rpx;
				border: 1px solid #eee;

				view {
					width: 55rpx;
					height: 50rpx;
					line-height: 45rpx;
					text-align: center;
					font-size: 26px;
				}

				input {
					flex: 1;
					text-align: center;
				}
			}
		}
	}
</style>